// 1. 创建一个新的axios实例
// 2. 请求拦截器，如果有token进行头部携带
// 3. 响应拦截器：1. 剥离无效数据  2. 处理token失效
// 4. 导出一个函数，调用当前的axsio实例发请求，返回值promise

import axios from 'axios' // 导入 axios 模块
import store from '@/store' // 导入 store仓库实例
import router from '@/router' // 导入路由实例

// 路由基地址, 导出让一些需要用到的地方: 图片...
// 🔔 两台在线服务器，如果某一台比较慢可以换成另一台
export const baseURL = 'http://pcapi-xiaotuxian-front-devtest.itheima.net/'
// export const baseURL = 'https://apipc-xiaotuxian-front.itheima.net'
// 创建路由实例
const instance = axios.create({
  baseURL, // 路由基地址
  timeout: 50000 // 超出时间报错
})
// 请求拦截器  config:请求配置内容
instance.interceptors.request.use(config => {
  // 1.获取用户的信息对象
  const { profile } = store.state.user
  // 2.判断token
  if (profile.token) {
    // 3.如果有token 把token存到请求头
    config.headers.Authorization = `Bearer ${profile.token}`
  }
  // 返回加工后的配置，用于发送请求
  return config
}, err => {
  // 用于 catch 捕获错误信息
  return Promise.reject(err)
})

// 响应拦截器
instance.interceptors.response.use(
  // 请求成功后，返回 res.data
  res => res.data,
  err => {
    // 后端状态码 401 表示用户信息无效(token无效)
    if (err.response && err.response.status === 401) {
      // 清空无用的用户信息
      store.commit('user/setUser', {})
      // 保存当前路由的地址
      // router.currentRoute.value.fullPath 当前路由地址 其中router.currentRoute是ref响应式数据
      // fullPath 路由的完整路径(包括路由参数)
      // encodeURIComponent 转换uri编码,防止解析错误
      const fullPath = encodeURIComponent(router.currentRoute.value.fullPath)
      // 跳转登录页面
      // redirectUrl 页面重定向
      // 页面登录成功后跳转回原来的页面
      router.push('/login?redirectUrl=' + fullPath)
    }
    return Promise.reject(err)
  })

// 请求工具函数
const request = (url, method = 'get', submitData) => {
  // 负责发请求：请求地址，请求方式，提交的数据
  return instance({
    url,
    method,
    // 1. 如果是get请求  使用params来传递submitData   (?a=10&c=10)
    // 2. 如果不是get请求  使用data来传递submitData   (请求体传参)
    // [] 设置一个动态的key, 写js表达式，js表达式的执行结果当作KEY
    // method参数：get,Get,GET  转换成小写再来判断
    // 在对象，['params']:submitData ===== params:submitData 这样理解
    [method.toLowerCase() === 'get' ? 'params' : 'data']: submitData
  })
}
export default request

/*
// 传统的写法，请求参数要区分 params 和 data
axios({
  url: '请求地址',
  method: 'GET',
  params: 请求参数
})

axios({
  url: '请求地址',
  method: 'POST',
  data: 请求参数
})

*/
